/*
 * @Author: 谭必清
 * @Date: 2024-09-06 14:57:36
 * @LastEditors: 谭必清
 * @LastEditTime: 2024-09-06 15:09:52
 * @FilePath: /message-board/css/todo.css
 * Copyright (c) 2020 - 2024 by TanBQ., All Rights Reserved.
 */
/* 通知部分 */
tan-msgNotification {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #1d1d1d;
    color: #f5f5f6;
    padding: 15px 30px;
    border-radius: 40px;
    font-size: 16px;
    z-index: 1000;
    opacity: 0;
}

tan-msgNotification.show {
    display: block;
    top: 5%;
    opacity: 1;
    transform: translateX(-50%) translateY(-50%);
    animation: slideDown 1s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

tan-msgNotification.unshow {
    display: block;
    top: 5%;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    animation: slideUp 1s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes slideDown {
    from {
        top: -20px;
        opacity: 0;
        transform: translateX(-50%) translateY(-100%);
    }

    to {
        top: 5%;
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes slideUp {
    from {
        top: 5%;
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    to {
        top: -20px;
        opacity: 0;
        transform: translateX(-50%) translateY(-100%);
    }
}

/* 表格内容部分 */
.container {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    color: #1d1d1d;
    background-color: #f5f5f6;
}

.buttons {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

.buttons button {
    margin: 5px;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 100px;
    border: none;
    color: #f5f5f6;
    cursor: pointer;
}

.buttons button:hover {
    box-shadow: #fff 0 0 40px 10px;
}

.buttons button:active {
    box-shadow: inset #fff 0 0 9px 0px;
}

.left {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    margin-top: 80px;
    padding: 20px;
    width: 80px;
    height: 700px;
    flex-shrink: 0;
    background-color: #f5f5f6;
}

.item {
    width: 100px;
    height: 50px;
    text-align: center;
    font-size: larger;
    line-height: 50px;
    color: #f5f5f6;
}

.color1 {
    background-color: #1d1d1d;
}

/* .color1 {
    background-color: palevioletred;
} */

.color2 {
    background-color: lightblue;
}

.color3 {
    background-color: lightgreen;
}

.color4 {
    background-color: lightcoral;
}

.color5 {
    background-color: lightcyan;
    color: #999;
}

.color6 {
    background-color: lavender;
    color: #999;
}

.color7 {
    background-color: lightgray;
}

.color8 {
    background-color: lightpink;
}

.color9 {
    background-color: lightsalmon;
}

.color10 {
    background-color: lightseagreen;
}

.color11 {
    background-color: lightskyblue;
}

.color12 {
    background-color: lightslategray;
}

.color13 {
    background-color: lightsteelblue;
}

.right {
    background-color: #f5f5f6;
    margin: 0 20px 0 12px;
    height: auto;
}

.right table {
    border-collapse: collapse;
    width: 100%;
}

.right table caption {
    /* 这样为了左侧的 margin-top */
    height: 80px;
}

.right table th,
.right table td {
    width: 100px;
    height: 50px;
    color: #1d1d1d;
    font-size: larger;
    text-align: center;
    border: 1px solid #ddd;
}

.drop-over {
    background-color: #fff;
}